<!--    客户管理  by jh   -->
<template>
    <div>
       <div class="right">
           <el-row>
               <div class="ca-title pull-left"><h3 class="h3">客户管理</h3></div>
               <el-input
                   placeholder="请输入客户名称"
                   v-model="ruleForm.guestName"
                   class="ca-w-280 ca-m-l-20 ca-m-r-10 pull-left"
                   @keyup.enter.native="getList"
                      >
                   <el-button @click="getList" slot="append" icon="el-icon-search"></el-button>
               </el-input>
               <div class="ca-pull-right">
                   <el-button  icon="el-icon-plus" class="ca-color-download"  @click="addClient"
                              :disabled="!isAuthCreate">&nbsp;新建客户
                   </el-button>
               </div>
           </el-row>
           <div class="ca-m-t-15">
               <el-table
                   class="ca-table"
                   border
                   :data="tableData"
                   @sort-change="tableSort"
                   >
                   <el-table-column
                       width="80"
                       label="序号"
                       type="index" align="center">
                   </el-table-column>
                   <el-table-column
                       sortable="custom"
                       property="guestName"
                       label="客户名称" >
                       <template slot-scope="scope">
                           <el-tooltip :content="scope.row.guestName" placement="top" class="item">
                             <el-button type="text" @click="toDetail(scope.row)" class="ca-text-over-flow-ellipsis">{{ scope.row.guestName }}</el-button>
                           </el-tooltip>
                       </template>
                   </el-table-column>
                   <el-table-column
                       sortable="custom"
                       property="guestType"
                       label="客户类型">
                       <template slot-scope="scope">
                          <span>{{ scope.row.guestType | getNameById('guestType')}}</span>
                       </template>
                   </el-table-column>
                   <el-table-column
                       sortable="custom"
                       property="guestLevel"
                       label="客户级别">
                       <template slot-scope="scope">
                           <span>{{ scope.row.guestLevel | getNameById('guestGrade')}}</span>
                       </template>
                   </el-table-column>
                   <el-table-column
                       property="guestRelationship"
                       label="客户关系">
                       <template slot-scope="scope">
                           <span>{{scope.row.guestRelationshipShow?scope.row.guestRelationshipShow.substr(0,scope.row.guestRelationshipShow.length-1):''}}</span>
                       </template>
                   </el-table-column>
                   <el-table-column
                       sortable="custom"
                       property="createTime"
                       label="创建时间">
                       <template slot-scope="scope">
                           <span>{{ scope.row.createTime?scope.row.createTime.substring(0,scope.row.createTime.length-2):''}}</span>
                       </template>
                   </el-table-column>
                   <el-table-column
                       property="address"
                       label="投资详情">
                       <template slot-scope="scope">
                           <!--guestId-->
                           <el-button :disabled="!isAuthInvent" @click="toInvestmentDetails(scope.row)" type="text">查看</el-button>
                       </template>
                   </el-table-column>
                   <el-table-column
                       label="操作">
                       <template slot-scope="scope">
                           <el-button @click="deleteClient(scope.$index,tableData)" :disabled="!isAuthDel" type="text">删除</el-button>
                       </template>
                   </el-table-column>
               </el-table>
           </div>
           <el-pagination class="use-list-pagination"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="vuePageSizes"
               :page-size="vuePageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="totalCount">
           </el-pagination>
       </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                guestRelationshipAll: this.$store.state.user.dictionaryMap.guestRelationship,
                tableData: [],//后台数据
                currentPage: 1, //当前页面
                totalCount: 0,//总页数
                ruleForm: {
                    pageIndex: 1,//查询页数
                    pageSize: this.vuePageSize,//每页数量
                    guestName: '',//搜索关键字
                    orderBy: 'createTime',//orderBy:为排序字段名,
                    sort: 'desc',//sort:为正序 asc 倒序 desc
                },
                // 权限
                isAuthSee: isNoAuth('客户管理-客户信息-查看'),
                isAuthCreate: isNoAuth('客户管理-客户信息-新建'),
                isAuthDel: isNoAuth('客户管理-客户信息-删除'),
                isAuthInvent: isNoAuth('客户管理-投资详情-查看'),
            }
        },
        watch: {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                if (!vm.isAuthSee) {
                    //vm.$message.error('没有此页面的操作权限');
                    vm.$message({
                        message: '没有此页面的操作权限',
                        type: 'error',
                        center: true
                    });
                    vm.$router.go(-1);
                    return;
                }
                vm.getList();
                //vm.getAuth();
            });
        },
        mounted() {
        },
        methods: {
            //表格排序
            tableSort({prop, order }) {
                if ( prop && order) {
                    //排序顺序---为正序 asc 倒序 desc
                    if (order === 'ascending') {
                        this.ruleForm.sort = 'asc'
                    } else {
                        this.ruleForm.sort = 'desc'
                    }
                    //排序字段
                    this.ruleForm.orderBy = prop
                    //调用列表
                    this.getList()
                }
            },
            //获取客户列表
            getList() {
                let params = Object.assign({},this.ruleForm)
                apiHttp(api.GET_CLIENT_LIST,params).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.tableData = [...ret.data.resultData]
                        //添加一个字段
                        this.tableData.map((item)=>{
                             item.guestRelationship.map(()=> {
                                 item.guestRelationshipShow = ''
                             })
                        })
                        //给字段赋值
                        this.tableData.map((item)=> {
                            item.guestRelationship.map((sub)=> {
                                this.guestRelationshipAll.map((list )=> {
                                    if (sub.guestTypeId === list.id) {
                                        item.guestRelationshipShow += list.name + '、'
                                    }
                                })
                            })
                        })
                        this.totalCount = ret.data.totalCount
                    }
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                 //console.log(`每页 ${val} 条`);
                this.ruleForm.pageSize = val
                this.getList()
            },
            //当前页改变时会触发
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.ruleForm.pageIndex = val
                this.getList()
            },
            //新建项目
            addClient() {
               this.$router.push({ name: 'client-management-add'})
            },
            //详情页
            toDetail(row) {
                this.$router.push({ name: 'client-management-info',params: {eClient_guestId: row.guestId}})
            },
            //投资详情
            toInvestmentDetails(row) {
                this.$router.push({ name: 'client-management-investment-details',params: {eClient_bId: row.guestId}})
            },
            //删除客户
            deleteClient(index,rows) {
                this.$confirm('是否删除此客户信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        guestId: rows[index].guestId
                    }
                    apiHttp(api.DELETE_CLIENT,params).then(ret=> {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                                center: true
                            });
                            rows.splice(index, 1);
                            this.getList()
                        }
                    })
                },() => {
//                    this.$message({
//                        type: 'info',
//                        message: '已取消删除',
//                        center: true
//                    });
                })
            }
        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    /*分页样式*/
    .use-list-pagination{
        margin: 31px  25%;
    }
</style>
